<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('订单统计列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <form id="formId">
            <div class="col-sm-12 search-collapse">
                    <div >
                        展示方式:
                        <!--<label class="check-box">
                            <input type="checkbox" id="viewHour1">小时</label>-->
                        <label class="check-box">
                            <input type="checkbox" id="viewDate1">日期</label>
                        <label class="check-box">
                            <input type="checkbox" id="viewChannelId1">渠道</label>
                        <label class="check-box">
                            <input type="checkbox" id="viewProductId1">应用</label>
                        <label class="check-box">
                            <input type="checkbox" id="viewPayType1">支付方式</label>
                        <label class="check-box">
                            <input type="checkbox" id="viewGoodsType1">服务</label>
                    </div>
                    <div class="select-list">
                        <ul>
                            <li>
                                开始时间：
                                <input type="text" class="time-input" placeholder="请选择开始时间" name="startCreateTime" th:value="${#dates.format(startCreateTime, 'yyyy-MM-dd')}"/>
                            </li>
                            <li>
                                截止时间：
                                <input type="text" class="time-input" placeholder="请选择结束时间" name="endCreateTime" th:value="${#dates.format(endCreateTime, 'yyyy-MM-dd')}"/>
                            </li>
                            <li>
                                <label>渠道：</label>
                                <select name="channelId">
                                    <option value="">请选择渠道</option>
                                    <option th:each="channel:${channelList}" th:text="${channel.name}" th:value="${channel.code}"></option>
                                </select>
                            </li>
                            <li>
                                <label>应用：</label>
                                <select id="productId" name="productId" onchange="selectProduct()">
                                    <option value="">请选择应用</option>
                                    <option th:each="product:${productList}" th:text="${product.name}" th:value="${product.id}"></option>
                                </select>
                            </li>
                            <li>
                                <label>服务：</label>
                                <select id="goodsTypeId" name="goodsTypeId">
                                    <option value="">请选择服务</option>
                                </select>
                            </li>
                            <li>
                                <label>支付方式：</label>
                                <select name="payType" id="payType" >
                                    <option value="">请选择支付方式</option>
                                    <option value="alipay">支付宝</option>
                                    <option value="wxpay">微信</option>
                                </select>
                            </li>

                            <li>
                                <label>支付状态：</label>
                                <select name="status" id="status" >
                                    <option value="">请选择支付状态</option>
                                    <option value="0">未支付</option>
                                    <option value="1" selected>已支付</option>
                                    <option value="2">退款中</option>
                                    <option value="3">已退款</option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="onSearch()"><i class="fa fa-search"></i>&nbsp;查询</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
            </div>
            <input type="hidden" name="viewHour" id="viewHour" value="0">
            <input type="hidden" name="viewDate" id="viewDate" value="0">
                <input type="hidden" name="viewChannelId" id="viewChannelId" value="0">
            <input type="hidden" name="viewProductId" id="viewProductId" value="0">
            <input type="hidden" name="viewPayType" id="viewPayType" value="0">
            <input type="hidden" name="viewGoodsType" id="viewGoodsType" value="0">
            </form>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" data-show-footer="true"></table>
                <table id="bootstrap-table1" data-show-footer="true"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "product/orderStatis";

        $(function() {
            var options = {
                url: prefix + "/list",
                modalName: "订单统计",
                sortName: "returnDate",
                sortOrder: "desc",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '${comment}',
                    visible: false
                },
                {
                    field: 'item',
                    title: ''
                },
                {
                    field: 'returnDate',
                    title: '日期',
                    sortable: true
                },
                {
                    field: 'returnCount',
                    title: '订单数'
                },
                {
                    field: 'returnAvgAmount',
                    title: '订单平均金额'
                },
                {
                    field: 'returnCountAmount',
                    title: '总金额'
                }

                ]
            };
            $.table.init(options);
        });


    function onSearch() {
        var channelNameVis = false;
        var productNameVis = false;
        var payTypeVis = false;
        var goodsTypeVis = false;
        var dateVis = false;

        if($('#viewProductId1').is(':checked')) {
            productNameVis = true;
        }
        if($('#viewChannelId1').is(':checked')) {
            channelNameVis = true;
        }
        if($('#viewPayType1').is(':checked')) {
            payTypeVis = true;
        }
        if($('#viewGoodsType1').is(':checked')) {
            goodsTypeVis = true;
        }

        if($('#viewDate1').is(':checked') || (!productNameVis && !payTypeVis && !goodsTypeVis && !channelNameVis)) {
            dateVis = true;
        }

        var options = {
            url: prefix + "/list",
            modalName: "订单统计",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '${comment}',
                    visible: false
                },
                {
                    field: 'item',
                    title: ''
                },
                {
                    field: 'returnDate',
                    title: '日期',
                    visible: dateVis,
                    sortable: true
                },
                {
                    field: 'returnChannelName',
                    title: '渠道',
                    visible: channelNameVis
                },
                {
                    field: 'returnProductName',
                    title: '应用名称',
                    visible: productNameVis
                },
                {
                    field: 'returnPayType',
                    title: '支付方式',
                    visible: payTypeVis,
                    formatter: function(value, row, index) {
                        if(value == "alipay"){
                            return "支付宝";
                        }else if(value == "wxpay"){
                            return "微信";
                        }
                        return "";
                    }
                },
                {
                    field: 'returnGoodsTypeName',
                    title: '服务',
                    visible: goodsTypeVis
                },
                {
                    field: 'returnCount',
                    title: '订单数'
                },
                {
                    field: 'returnAvgAmount',
                    title: '订单平均金额'
                },
                {
                    field: 'returnCountAmount',
                    title: '总金额'
                },
            ]
        };
        $.table.refreshOptions(options,"bootstrap-table");

        oncheckBox();
        $.table.search();
    }

    function oncheckBox() {
        if($('#viewHour1').is(':checked')) {
           $("#viewHour").val("1");
        }else{
            $("#viewHour").val("0");
        }
        if($('#viewDate1').is(':checked')) {
            $("#viewDate").val("1");
        }else{
            $("#viewDate").val("0");
        }
        if($('#viewProductId1').is(':checked')) {
            $("#viewProductId").val("1");
        }else{
            $("#viewProductId").val("0");
        }
        if($('#viewChannelId1').is(':checked')) {
            $("#viewChannelId").val("1");
        }else{
            $("#viewChannelId").val("0");
        }
        if($('#viewPayType1').is(':checked')) {
            $("#viewPayType").val("1");
        }else{
            $("#viewPayType").val("0");
        }
        if($('#viewGoodsType1').is(':checked')) {
            $("#viewGoodsType").val("1");
        }else{
            $("#viewGoodsType").val("0");
        }
    }

        function selectProduct() {
            var productId = $("#productId").val();
            $.ajax({
                type: "GET",
                url: prefix + "/addChangeProduct?productId="+productId,
                cache: false,
                dataType: 'json',
                success: function(result) {
                    if (result) {
                        var html = "<option value=''>请选择服务</option>";
                        for (var i = 0; i < result.length; i++) {
                            html += "<option value='" + result[i].id + "'>" + result[i].name + "</option>"
                        }
                        $('#goodsTypeId').html(html);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("失败。");
                }
            });
        }
    </script>
</body>
</html>